<%@ page language="java"  pageEncoding="UTF-8"%>
<%@ page isELIgnored ="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2017-02-08
  Time: 15:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html id="html">
<head>
    <meta charset="utf-8" />
    <title>蛋糕名录</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/myCss.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/cakeName.css">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>

<body>

<div class="container-fluid">
    <!-- 页头 -->
    <header class="row">
        <div class="col-xs-3"></div>
        <div class="col-xs-6 myOrderForm">蛋糕名录</div>
        <div class="col-xs-3"></div>
    </header>
</div>


<!-- 搜索 -->
<div class="container-fluid">

    <form role="form">
        <div class="row">
            <div class="form-group col-xs-12">
                <label class="text-label" for="searchInput"><i class="fa fa-search"></i></label>
                <input type="text" name="goodsName" class="form-control" id="searchInput" placeholder="搜索商品、品类" />
                <input type="submit" value="搜索" />
            </div>
        </div>
    </form>
</div>
<!--  -->
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-9 sort-show">
            <a class="a-checked" href="CakeNameServlet?page=1">综合排序</a>
            <a id="sales" class="" href="SortServlet?page=1">销量优先</a>
        </div>
        <div class="col-xs-3">
            <%--<select class="select">
                <option value="筛选">筛选</option>
                <option value="奶油">奶油</option>
                <option value="冰淇淋">冰淇淋</option>
            </select>--%>
                <input type="button" value="奶油" onclick="location.href='MilkServlet?page=1'" >
                <input type="button" value="冰淇凌" onclick="location.href='IceServlet?page=1'">
        </div>
    </div>
    <c:forEach items="${sessionScope.GoodsList}" var="c" varStatus="t">
        <div class="massage clearfix">
            <img src="${c.photoUrl}" class="img-responsive"/>
            <div class="cake">
                <p class="cake-name">${c.goodsName}</p>
                <p class="cake-english-name">${c.goodsInfo}</p>
                <span class="score">积分可抵${c.disCount}%</span>
                <p class="price">￥${c.price}<span>${c.goodsSize}磅</span></p>
            </div>
        </div>
    </c:forEach>
</div>






<div class="container-fluid">
    <div class="row footer navbar-fixed-bottom">
        <a href="#"><div class="col-xs-3 conFl"><i class="fa fa-home"></i><span class="fontFooter">主页</span></div></a>
        <a href="#"><div class="col-xs-3 conFl pitchOn"><i class="fa fa-book"></i><span class="fontFooter">蛋糕名录</span></div></a>
        <a href="#"><div class="col-xs-3 conFl"><i class="fa fa-shopping-cart"></i><span class="fontFooter">购物车</span></div></a>
        <a href="#"><div class="col-xs-3 conFl"><i class="fa fa-user"></i><span class="fontFooter">  个人中心</span></div></a>
    </div>
</div>



<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    window.onload = function(){
        fontSelf();
    }
    window.onresize = function () {
        fontSelf();
    };
    function fontSelf() {
        var wHtml = document.getElementById('html');
        var w = document.documentElement.clientWidth;
        w =  w > 768 ? 768 : document.documentElement.clientWidth;
        wHtml.style.fontSize = w * 0.054 + 'px';
    };
    var oDiv = document.getElementsByClassName('sort-show')[0];
    var aA = oDiv.getElementsByTagName('a');
    var oInt = document.getElementById('searchInput');
    aA[0].onclick = function(){
        this.setAttribute("class", "a-checked");
        aA[1].className = "un-checked";
    }
    aA[1].onclick = function(){
        this.setAttribute("class", "a-checked");
        aA[0].className = "un-checked";
    }
    oInt.onclick = function(){
        document.key

    }
    $(function(){

    })
    // $.ajax({
    // 	url:"";
    // 	type:"get";//表单提交方式
    // 	data:JSON.stringify(json);//json拼接成字符串形式
    // 	dataType:"json";//接受数据类型
    // 	success:fun;//成功后调用
    // 	error:function(){alert("请求失败");};
    // });

    // function fun(data,stutes){
    // 	alert("成功");
    // }
</script>
<tr>
    <td colspan="5" align="right" style="padding-right: 100px; padding-top: 20px;">
        <a href="CakeNameServlet?page=1">首页</a>
        <a  href="CakeNameServlet?page=${sessionScope.page-1}">上一页</a>
        <a href="CakeNameServlet?page=${sessionScope.page+1}">下一页</a>
        <a href="CakeNameServlet?page=${sessionScope.maxPage}">末页</a>
    </td>
</tr>
</body>
</html>